<template>
  <div class="Discern">
        <el-card  shadow="never" style="flex-basie:394px" :body-style="{height: 'calc(100% - 100px)',overflow:'auto'}">
        <div>
            <div class="country-content box-m-b">
            <div class="title">提取方式</div>
            <div class="country-list">
              <div :class="{active : extract == 'url' }"  @click="extract = 'url'">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.1612 14.272L9.32102 15.1122C8.16096 16.2723 6.28012 16.2723 5.12005 15.1122C3.95998 13.9521 3.95998 12.0713 5.12005 10.9112L5.96024 10.071M13.522 10.9112L14.3622 10.071C15.5223 8.91096 15.5223 7.03012 14.3622 5.87005C13.2021 4.70998 11.3213 4.70998 10.1612 5.87005L9.32102 6.71024M7.66174 12.5705L11.8205 8.41173" stroke="#17233D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <span class="font_14" style="padding-left: 4px;">链接提取</span>
              </div>
              <div :class="{active : extract == 'video' }" @click="extract = 'video'">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15.4166 7.5V6.25" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.25 6.54459C6.25 6.04284 6.25 5.79196 6.35462 5.65367C6.44576 5.53319 6.58506 5.45864 6.73586 5.44964C6.90895 5.4393 7.1177 5.57846 7.53518 5.85679L12.968 9.4787C13.313 9.70867 13.4855 9.82366 13.5456 9.96859C13.5981 10.0953 13.5981 10.2377 13.5456 10.3644C13.4855 10.5093 13.313 10.6243 12.968 10.8543L7.53518 14.4762C7.1177 14.7545 6.90895 14.8937 6.73586 14.8834C6.58506 14.8744 6.44576 14.7998 6.35462 14.6793C6.25 14.541 6.25 14.2902 6.25 13.7884V6.54459Z" stroke="#17233D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <span class="font_14" style="padding-left: 4px;">视频提取</span>
              </div>
            </div>
          </div>
          <div class="country-content box-m-b">
            <div class="title">地区国家</div>
            <div class="country-list">
              <div :class="{active : language == item.id}" v-for="(item,index) in countryList" :key="index" @click="language = item.id">
                <img :src="require(`@/assets/img/${item.icon}.png`)" alt="" /> <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="box-m-b" v-if="extract == 'url'">
            <div class="title">素材链接</div>
            <div>
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请将素材链接粘贴在此处"
                v-model="source_url"
              >
              </el-input>
            </div>
          </div>
          <div class="box-m-b" v-else>
            <div class="title">视频上传</div>
            <div>
                <el-upload
                    class="video_upload"
                    ref="upload" 
                    :limit="6"
                    drag
                    multiple  
                    accept=".mp4,.MP4,.MOV,.mov" 
                    :show-file-list="false"
                    :http-request="videoUploadRequest" 
                    :before-upload="beforeVideoUpload"
                    >
                 <img src="@/assets/img/round_add.svg" alt="" style="margin-bottom:8px">
                <div class="el-upload__text">点击上传或直接将视频文件拖入此区域</div>
                <div class="el-upload__tip" style="color: #ACB2BB;">视频大小不超过 50M，最多 6 个视频</div>
                </el-upload>
                <div v-if="VideoList.length > 0" class="flexbox" style="width:355px;flex-wrap:wrap;gap:8px">
                    <div class="vide_item" v-for="(item,index) in VideoList">
                        <div class="vide_item_img flexbox flexcenter flexjust">
                           <video :src="item.material" class="vd_poster"></video>
                           <div class="icon_item flexbox flexcenter flexjust">
                            <svg @click="playVideo(item.material)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M0.351826 6.19402L0.351852 6.19408C1.33468 8.39304 3.55217 9.81279 6 9.81279C8.44783 9.81279 10.6653 8.39304 11.6481 6.19408L11.6482 6.19402L11.721 6.03079L11.7346 6.00024L11.721 5.9697L11.6482 5.80647L11.6481 5.80641C10.6653 3.60745 8.44783 2.1877 6 2.1877C3.55217 2.1877 1.33468 3.60745 0.351852 5.80641L0.351826 5.80647L0.279036 5.9697L0.265415 6.00024L0.279036 6.03079L0.351826 6.19402ZM6 8.86187C3.9989 8.86187 2.183 7.74495 1.31286 6.00024C2.18301 4.25554 3.99913 3.13862 6 3.13862C8.00087 3.13862 9.81699 4.25554 10.6871 6.00025C9.81699 7.74495 8.0011 8.86187 6 8.86187ZM4.18727 6.00024C4.18727 6.99865 5.00053 7.81055 6 7.81055C6.99947 7.81055 7.81273 6.99853 7.81273 6.00024C7.81273 5.00196 6.99947 4.18994 6 4.18994C5.00053 4.18994 4.18727 5.00184 4.18727 6.00024ZM5.13923 6.00024C5.13923 5.52659 5.52544 5.14086 6 5.14086C6.47456 5.14086 6.86077 5.52659 6.86077 6.00024C6.86077 6.4739 6.47467 6.85963 6 6.85963C5.52533 6.85963 5.13923 6.4739 5.13923 6.00024Z" fill="white" stroke="white" stroke-width="0.15"/>
                            </svg>
                            <svg @click="del_video(index)"  xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3.71423 3.42815L4.019 1.71387H7.9809L8.28566 3.42815" stroke="white" stroke-width="0.914286" stroke-linejoin="round"/>
                                <path d="M2 3.42871H10" stroke="white" stroke-width="0.962406" stroke-linecap="round"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.85711 3.42871L8.41755 10.2859H3.58238L3.14282 3.42871H8.85711Z" stroke="white" stroke-width="0.914286" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4.85718 8.28613H7.14289" stroke="white" stroke-width="0.914286" stroke-linecap="round"/>
                            </svg>
                        </div>
                        
                        </div>
                        <el-tooltip :content="item.primary_name" placement="bottom">
                                    <div class="vide_item_name">{{item.primary_name}}</div>
                        </el-tooltip>
                    </div>
                </div>
            </div>
          </div>
          <div class="box-m-b">
            <div class="title">任务备注</div>
            <div>
              <el-input v-model="nutes" maxlength="20" placeholder="请给任务添加备注，以便区分，不多于 20 字。"></el-input>
            </div>
          </div>
          <div class="model-content ">
            <div class="title">AI 模型</div>
            <div class="model-box">
                <div class="line">
                    <div class="line-text line-top-color">快</div>
                    <div class="line-center">处理进度</div>
                    <div class="line-text line-bottom-color">慢</div>
                </div>
                <div class="model-list">
                    <div class="model-item" :class="{ active: model == item.id }" v-for="item in modelList" :key="item.id" @click="model = item.id">
                        <img :src="require(`@/assets/img/${item.icon}.png`)" alt="">
                        <div class="item-text">{{ item.name }}</div>
                        <img class="bg-img" :src="require(`@/assets/img/discern/${item.bgicon}.png`)" alt="">
                    </div>
                </div>
                <div class="line">
                    <div class="line-text line-bottom-color">差</div>
                    <div class="line-center" style="background: linear-gradient(180deg, #FFA08B 0%, #FFA08B 29.59%, #31F3CE 100%);">识别精准度</div>
                    <div class="line-text  line-top-color">优</div>
                </div> 
            </div>
          </div>
          <div class="submit-btn">
            <el-button class="btn-submit" @click="submitForm" :loading="creatLoading">创建提取任务</el-button>
          </div>
            </div>
        </el-card>
        <el-card shadow="never" style="flex:1" :body-style="{height: '100%',position: 'relative'}">
          <div class="header-task">
           <p>任务列表</p>
           <div>
             <el-input
                 placeholder="任务备注名称"
                 suffix-icon="el-icon-search"
                 v-model="queryInfo.query"
                 @change="getDataList(1)">
             </el-input>
            </div>
          </div>
          <div class="task-content"  v-loading="loading">
                <div class="task-item" v-for="item in taskList" :key="item.id">
                    <div class="f-a-c" style="width:46%;">
                        <img :src="languageImage(item)" alt="">
                        <span class="m-12-28">{{ formatLanguage(item.language)}}</span>
                        <div style="width:60%;" >
                            <div class="f-a-c">
                                <img src="@/assets/img/discern/Icon-link.png" alt="" style="cursor: pointer;" v-if="item.source_type == 1">
                                <img src="@/assets/img/video.svg" alt="" style="cursor: pointer;" v-else>
                                <el-tooltip :content="item.source_url" placement="top-end">
                                   <div class="overflow-hidden">{{ item.source_url }}</div>
                                </el-tooltip>
                            </div>
                            <div class="f-a-c"><img src="@/assets/img/discern/Icon_Editor.png" alt="" style="cursor: pointer;" @click="editnutes(item)"><span style="color:#B4B7BD">{{ item.nutes }}</span></div>
                        </div>
                    </div>
                    <div class="f-a-c" style="flex-shrink:0">
                        <div class="processing" :class="`processing-color-${item.status}`">
                             <el-popover placement="top" trigger="hover" v-if="item.status == '4'">
                                    <div class="tips_content" >
                                        {{item.err_mag}}
                                    </div>
                                    <div class="flexbox flexcenter" slot="reference">
                                        <span class="text_red" style="margin-right:5px">{{ item.status | filterStatus }}</span>
                                        <img src="@/assets/img/discern/note.png" alt="">
                                    </div>
                                </el-popover>
                                <div v-else>{{ item.status | filterStatus }}</div>
                            </div>
                        <div class="m-8-6">{{ item.create_time }}</div>
                        <div style="cursor: pointer;margin-right:4px" @click="deletStrategy(item.id)"><img src="@/assets/img/discern/Icon_delete.svg" alt="" class="market_icon" ></div>
                        <div><img v-if="item.status == '3'" src="@/assets/img/discern/Icon_result_active.png" alt="" style="cursor: pointer;" @click="getdiscernInfo(item)"><img v-else src="@/assets/img/discern/Icon_result.png" alt=""></div>
                    </div>
                </div>
          </div>
          <div class="page_box flexbox flexcenter fixed">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[10, 20, 50, 100]" :total="total">
                </el-pagination>
            </div>
        </el-card>
          
        <el-dialog :title="dialogText" :visible.sync="outerVisible" :class="{'resultdialog':!isEdit}" :width="querydiscernInfo.language == 'dy' ? '450px':'780px'" >
            <div style="display: flex;gap: 12px;justify-content:center;" v-loading="dloading"  v-if="!isEdit">
                <div class="result-box 2">
                    <p style="color: #17233D;margin-bottom: 12px;">原文</p>
                    <div class="result-item" v-for="item in OtList" :key="item.id">
                        {{ item.content_txt }}
                    </div>
                </div>
                <div class="result-box 1" v-if="querydiscernInfo.language == 'tk'">
                    <p style="color: #17233D;margin-bottom: 12px;">译文</p>
                    <div class="result-item" v-for="item in TList" :key="item.id">
                        {{ item.content_txt }}
                    </div>
                </div>
            </div>
            <div v-else  v-loading="dloading">
                <p style="color: #17233D;margin-bottom: 12px;">备注任务</p>
                <div><el-input maxlength="20" placeholder="请输入备注内容" v-model="Editnutes"></el-input></div>
            </div>
           <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">关闭</el-button>
                <el-button style="border: 1px solid #165DFF;color: #165DFF;" @click="copytext('translate')" v-if="!isEdit && querydiscernInfo.language != 'dy' ">复制译文</el-button>
                <el-button type="primary" @click="copytext('original')" v-if="!isEdit">复制原文</el-button>
                <el-button type="primary" @click="savenutes" v-else>保存</el-button>
            </div>
        </el-dialog>
        <PlayVideo />
  </div>
</template>

<script>
import PlayVideo from "@/components/material/PlayVideo";
const countryList = [
    {
        name:'中国',
        icon:'cmn-Hans-CN',
        id:'cmn-Hans-CN'
    },
    {
        name:'美国',
        icon:'eng-US',
        id:'eng-US'
    },
    {
        name:'印尼',
        icon:'ind-ID',
        id:'ind-ID'
    
    }
];
const modelList = [
    {
        name:'tiny',
        icon:'tiny',
        id:'tiny',
        bgicon:'t-bg'
    },
    {
        name:'base',
        icon:'base',
        id:'base',
        bgicon:'b-bg'
    },
    {
        name:'small',
        icon:'small',
        id:'small',
        bgicon:'s-bg'
    },
    {
        name:'medium',
        icon:'medium',
        id:'medium',
        bgicon:'m-bg'
    },
    {
        name:'large-V',
        icon:'large',
        id:'large-v2',
        bgicon:'l-bg'
    }
];
export default {
  data() {
    return {
        countryList,
        modelList,
        creatLoading:false,
        VideoList:[],
        extract:'url',
        source_url:'',
        language:'',
        model:'',
        nutes:'',
        isEdit:false,
        Editnutes:'',
        loading:false,
        dloading:false,
        dialogText:'',
        outerVisible:false,
        taskList:[],
        queryInfo: {
            page: 1,
            limit: 20,
            query: "",
        },
        querydiscernInfo: {
            task_id:'',
            language:''
        },
        OtList:[],
        TList:[],
        total: 1,
        setpage: 1,
        languageImages: {
        'ind-ID': require('@/assets/img/ind-ID.png'),
        'eng-US': require('@/assets/img/eng-US.png'),
        'cmn-Hans-CN': require('@/assets/img/cmn-Hans-CN.png'),
        },
    };
  },
  components:{
    PlayVideo
  },
  filters:{
    filterStatus(e){
        let obj = {
            1:'待处理',
            2:'处理中',
            3:'成功',
            4:'失败'
        }
      return obj[e]
    }
  },
  computed: {	// 使用计算属性
    formatLanguage() {
        return (val) => {
            const foundItem = this.countryList.find(item => item.id === val);
            return foundItem ? foundItem.name : '';
        };
    },
    languageImage() {
        // 返回对应语言的图片路径，如果没有找到对应的路径则返回一个默认路径或者空字符串
        return (item) => this.languageImages[item.language] || '';
    },
	},
  created() {
    this.getDataList(1)
  },
  methods: {
    del_video(index){
        this.VideoList.splice(index,1)
    },
    playVideo(url) {
            const attr = {
                dialogVsb: true,
                url: url,
            };
            this.$bus.emit("playVideo", attr);
    },
    //上传检验
    beforeVideoUpload(file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "MP4" || testmsg === "mp4" || testmsg === "MOV" || testmsg === "mov";
            const isLt2M = file.size / 1024 / 1024 < 50;
            if (this.VideoList.length >= 6) {
                const now = new Date();  
                const seconds = now.getSeconds().toString().padStart(2, '0'); // 保证是两位数 
                 setTimeout(() => {
                        this.$message({
                            message: "最多上传6个视频！",
                            type: "error",
                        });
                    }, seconds);
                return false;
            }
            if (!extension) {
                this.$message({
                    message: "上传视频只能是mp4、MOV/ MP4、MOV格式!",
                    type: "error",
                });
                return false;
            }
            if (!isLt2M) {
                const now = new Date();  
                const seconds = now.getSeconds().toString().padStart(2, '0'); // 保证是两位数 
                setTimeout(() => {
                    this.$message({
                        message: "上传文件大小不能超过 50MB!",
                        type: "error",
                    });
                }, seconds);
                return false;
            }

            return extension || isLt2M;
    },
    //上传文件
    videoUploadRequest(file){
        let that = this;
        // let videoType = { quicktime: 'mov', mp4: 'mp4' }   
        let videoSrc = URL.createObjectURL(file.file);
        let videoElement = document.createElement("video");
            videoElement.src = videoSrc;

        that.VideoList.push({
                file: file.file,
                material: videoElement.src,
                duration : Math.round(videoElement.duration),
                material_name: file.file.name,
                primary_name: file.file.name.slice(0,-4),
                process: 0,
            });
            that.$refs.upload.clearFiles();
            // videoElement.addEventListener("loadedmetadata", function (v) {
            //         that.$refs.upload.clearFiles();
            // });
    },
     // 删除任务
        deletStrategy(id) {
            this.$confirm("删除后将无法恢复", "确定要删除任务吗?", {
                confirmButtonText: "确定删除",
                cancelButtonText: "取消",
                confirmButtonClass:'confirmButtonColor',
                cancelButtonClass:'cancelButtonColor'
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/material/discernDel",
                        {
                            task_id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },
    //获取 素材文本识别列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.get(
                "adminapi/materialv2/discernList",
                {params: this.queryInfo}
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.taskList = res.data.list;
                this.total = res.data.count;
            }
        },

    //添加 素材文本识别
    async submitForm(){
        const validationRules = {
            language: '地区国家',
            source_url: '素材链接',
            nutes: '任务备注',
            model: 'AI模型',
        };
        const validationRulesVideo = {
            language: '地区国家',
            nutes: '任务备注',
            model: 'AI模型',
        };
        const api_url = {
           video:'adminapi/materialv2/discernUpFild',
           url:'adminapi/materialv2/discernAdd'
        }
        if(this.extract == 'url'){
            for (const [field, label] of Object.entries(validationRules)) {
                if (!this[field]) {
                    return this.$message.error(`请完善 “${label}” 后提交！`);
                }
            }
        }else{
             for (const [field, label] of Object.entries(validationRulesVideo)) {
                if (!this[field]) {
                    return this.$message.error(`请完善 “${label}” 后提交！`);
                }
            }
            if(this.VideoList.length==0){
                 return this.$message.error(`请上传视频后提交！`);
            }
        }
        try {
            if(this.extract == 'video'){
                
                // this.VideoList.forEach(async (e) => {
                //     console.log(e.file)
                //     const formData = new FormData();
                //     formData.append('file', e.file);
                //     const { data: res } = await this.$http.post(api_url[this.extract], formData,{headers: {'Content-Type': 'multipart/form-data'},params:{
                //             language: this.language,
                //             model: this.model,
                //             nutes: this.nutes
                //     }});
                //     if (res.code !== 200) {
                //     this.$message.error(res.msg);
                //     } else {
                //         if(this.VideoList.length)
                //         this.$message({
                //             message: '创建成功',
                //             type: 'success'
                //         });
                //         this.resetform();
                //         this.getDataList(1);
                //     }
                // });
                this.creatLoading = true;
                const uploadPromises = this.VideoList.map(e => {
                    const formData = new FormData();
                    formData.append('file', e.file);

                    return this.$http.post(api_url[this.extract], formData, {
                        headers: { 'Content-Type': 'multipart/form-data' },
                        params: {
                        language: this.language,
                        model: this.model,
                        nutes: this.nutes
                        }
                    });
                });
                Promise.all(uploadPromises)
                    .then(responses => {
                        const failedUploads = responses.filter(response => response.data.code !== 200);
                        if (failedUploads.length > 0) {
                        failedUploads.forEach(response => {
                            this.$message.error(response.data.msg);
                        });
                        } else {
                        this.$message({
                            message: '创建成功',
                            type: 'success'
                        });
                        this.creatLoading = false;
                        this.resetform();
                        this.getDataList(1);
                        }
                    })
                    .catch(error => {
                        this.creatLoading = false;
                        console.error('文件上传失败', error);
                        this.$message.error('文件上传失败，请稍后重试');
                    });
            }else{
                const { data: res } = await this.$http.post(api_url[this.extract], {
                        source_url: this.source_url,
                        language: this.language,
                        model: this.model,
                        nutes: this.nutes
                });
    
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                } else {
                    this.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    this.resetform();
                    this.getDataList(1);
                }
            }
            } catch (error) {
             console.error('请求失败', error);
            }
        // let { source_url, language, model, nutes} = this;

        // if(source_url && language && model && nutes){
            
        //     const { data: res } = await this.$http.post(
        //         "adminapi/material/discernAdd",{
        //             source_url,language,model,nutes
        //         }
        //     );
        //     if (res.code !== 200) {
        //         this.$message.error(res.msg);
        //         return;
        //     } else {
        //           this.$message({
        //             message: '创建成功',
        //             type: 'success'
        //         });
        //         this.resetform()
        //         this.getDataList(1)
        //     }
        // }else{
        //     if(!language){
        //        return this.$message.error('请完善 “地区国家” 后提交！');
        //     }
        //     if(!source_url){
        //        return this.$message.error('请完善 “素材链接” 后提交！');
        //     }
        //     if(!nutes){
        //        return this.$message.error('请完善 “任务备注” 后提交！');
        //     }
        //     if(!model){
        //        return this.$message.error('请完善 “AI模型” 后提交！');
        //     }
        // }
    },

    // 素材文本识别详情
    async getdiscernInfo(e){
        this.dialogText = '识别结果';
        this.dloading = true;
        this.outerVisible = true
        this.isEdit = false;
        this.querydiscernInfo.task_id = e.id
        this.querydiscernInfo.language = e.language == 'cmn-Hans-CN' ? 'dy' : 'tk'

        try {
                const [otListRes, tListRes] = await Promise.all([
                    this.$http.post("adminapi/materialv2/discernInfo", { ...this.querydiscernInfo, language: 1 }),
                    this.$http.post("adminapi/materialv2/discernInfo", { ...this.querydiscernInfo, language: 2 })
                ]);

                this.OtList = otListRes.data.data.list;
                this.TList = tListRes.data.data.list;
        }
        catch (error) {
                console.error('请求失败', error);
        } 
        finally {
                this.dloading = false;
        }
    },

    // 编辑备注
    editnutes(item){
        this.dialogText = '任务备注'
        this.Editnutes = item.nutes
        this.querydiscernInfo.language = 'dy';
        this.querydiscernInfo.task_id = item.id
        this.outerVisible = true;
        this.isEdit = true;
    },

    //保存编辑
    savenutes(){
         this.dloading = true;
         this.$http.post("adminapi/material/discernNutesEdit",{task_id:this.querydiscernInfo.task_id, nutes: this.Editnutes }).then(res=>{
            if(res.data.code == 200){
                this.outerVisible = false;
                this.dloading = false;
                this.getDataList(this.queryInfo.page)
                this.$message({
                       message: '保存成功',
                       type: 'success'
                   });
            }
        })
    },
    // 复制 结果
    copytext(type){
       let textToCopy;

        if (this.querydiscernInfo.language === 'dy') {
            textToCopy = this.OtList.map(item => item.content_txt).join('\n');
        } else if (type === 'translate') {
            textToCopy = this.TList.map(item => item.content_txt).join('\n');
        } else if (type === 'original') {
            textToCopy = this.OtList.map(item => item.content_txt).join('\n');
        }

        // 创建一个textarea元素，设置其值和contentEditable属性，并将其附加到文档中
      const textarea = document.createElement('textarea');
      textarea.value = textToCopy;
      textarea.setAttribute('contentEditable', true);
      document.body.appendChild(textarea);

      // 选择textarea中的文本并将其复制到剪贴板
      textarea.select();
      document.execCommand('copy');

      this.$message.success('复制成功');

      // 从文档中删除textarea
      document.body.removeChild(textarea);

    },
    // 重置表单
    resetform(){
        this.source_url = '';
        this.language = '';
        this.model = '';
        this.nutes = '';
        this.VideoList = [];
    },
    // 每页显示多少条数据
    handleSizeChange(val) {
        this.queryInfo.limit = val;
        this.getDataList(1);
    },
    // 当前页切换
    handleCurrentChange(val) {
        this.setpage = val;
        this.getDataList(val);
    },
  },
};
</script>

<style>
 .el-message-box__content{color: #17233D !important}
 .confirmButtonColor{ background-color: #FE6262 !important; border-color: #FE6262 !important; font-size: 14px; width: 88px;}
 .cancelButtonColor{ font-size: 14px; width: 88px;}
 .confirmButtonColor:focus, .confirmButtonColor:hover { background: #FE6262 !important;border-color: #FE6262 !important;color: #fff;}
</style>

<style  scoped>
.resultdialog /deep/ .el-dialog__body{ height: 530px; overflow: auto; }
.processing-color-1{ color: #616C85; }
.processing-color-2{ color: #165DFF; }
.processing-color-3{ color: #00C271; }
.processing-color-4{ color: #FE6262; }

/deep/ .el-upload-dragger , /deep/ .el-upload--text { width: 100%;}
/deep/ .el-upload-dragger{ display: flex;align-items: center;flex-direction: column;justify-content: center;height: 106px;}

.video_upload{
    font-size: 0;
    margin-bottom: 12px;
}
.vide_item{
    margin-bottom: 8px;
    width: 113px;
}
.vide_item_img{
    position: relative;
    height: 70px;
    background: #F8F8F9;
    border-radius: 8px;
}
.vide_item_img video{
    width: 53px;
    height: 100%;
}
.vide_item_name{
    margin-top: 4px;
    color: #5C636C;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vide_item_img:hover .icon_item{
    display: flex;
    background: rgba(0, 0, 0, 0.50);
}
.icon_item{
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    gap: 8px;
}
.icon_item svg{
    cursor:pointer;
    width: 16px;
    height: 16px;
}

.el-card{
    position: relative;
}

.submit-btn{
    position: absolute;
    bottom: 0;
    padding-bottom: 20px;
    width: calc(100% - 40px);
    background: #FFF;
}
.overflow-hidden{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fixed{
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
}
.f-a-c{
    display: flex;
    align-items: center;
}
.m-12-28{
    margin: 0 28px 0 12px;
}
.m-8-6{
    margin: 0 12px 0 18px;
}
.Discern{
    position: relative;
    display: flex;
    height: 100%;
    gap: 12px;
}

.title{
    margin-bottom: 12px;
}

.box-m-b{
    margin-bottom: 20px;
}

.country-list {
  display: flex;
}

.country-list div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  padding: 8px;
  margin-right: 12px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  cursor: pointer;
}
.country-list div:last-child{
    margin-right: 0 !important;
}

.country-list span{
    padding-left: 8px;
}

.active {
  background: #FFF !important;
  border-color: #165dff !important;
}


.model-box{
    display: flex;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
}

.line-top-color{
 color: #32F2CD;
 background: #2EF4CF33;

}

.line-bottom-color{
 color: #FFA08B;
 background: #FFA08B33;
}

.line{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line-text{
    width: 20px;
    height: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
}

.line-center{
    display: flex;
    align-items: center;
    height: 288px;
    width: 12px;
    font-size: 12px;
    margin: 4px 0;
    padding: 0 4px;
    border-radius: 4px;
    letter-spacing: 14px;
    color: #FFF;
    background: linear-gradient(180deg, #25F7D1 0%, #FFA08B 64.74%, #FFA08B 100%);
}

.model-list{
    flex: 1;
    margin: 0 12px;
    margin-top: 24px;
}

.model-item{
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(165, 177, 209, 0.10);
}
.model-item .bg-img{
    position: absolute;
    right: 40px;
}
.model-item .item-text{
    font-size: 14px;
    margin-left: 12px;
}
.btn-submit{
    width: 100%;
    margin-top: 20px;
    border-radius: 8px;
    background: #165DFF;
    color: #FFF;
}

.header-task{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.task-content{
    overflow: auto;
    height: calc(100% - 148px);
}

.processing {
    position: relative;
    padding-left: 14px; /* 为了给伪元素留出空间 */
    width: 51px; /* 设计稿 65 - 14 伪类  */
}

.processing::before {
    content: '\2022'; /* 使用Unicode字符表示圆点 */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    font-size: 22px;
    display: flex;
    align-items: center;
}
.task-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 12px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    background: #FFF;
    box-shadow: 0px 1px 4px 0px rgba(200, 200, 200, 0.20);
}

.result-box{
    min-height: 500px;
    width: 360px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
}

.result-item{
    color: #17233D;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid #EBEBEB;
}
</style>